<template>
  <div class="layout-box">
    <GlobalHeader></GlobalHeader>
    <a-layout class="layout">
      <template>
        <GlobalLeftMenu></GlobalLeftMenu>
      </template>
      <template>
        <SideMenu mode="inline" :menus="menus" @menuSelect="menuSelect" @updateMenuTitle="handleUpdateMenuTitle"></SideMenu>
        <a-layout>
          <a-layout-content
            :style="{marginLeft: '4px', minHeight: 'calc(100vh - 150px)'}"
          >
            <slot></slot>
          </a-layout-content>
        </a-layout>
      </template>
    </a-layout>
  </div>
</template>

<script>
import GlobalHeader from './GlobalHeader.vue'
import GlobalLeftMenu from './GlobalLeftMenu.vue'
import SideMenu from '../Menu/SideMenu.vue'
import {mapState} from 'vuex'
export default {
  name: 'GlobalLayout',
  components: {
    GlobalHeader,
    GlobalLeftMenu,
    SideMenu
  },
  data () {
    return {
      menus: []
    }
  },
  computed: {
    ...mapState({
      // 主路由
      mainRouters: state => state.permission.addRouters,
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    })
  },
  created() {
    this.menus = this.permissionMenuList
    console.log('菜单', this.menus)
  },
  methods: {
    menuSelect(value) {
      this.findMenuByKey(this.menu, value.key)
      this.$emit('dynamicT=RouterShow', value.key, this.activeMenu.title, this.activeMenu.meta)
    },
    findMenuByKey(menus, key) {
      for (let i in menus) {
        if (i.path === key) {
          this.activeMenu = {...i}
        } else if (i.children && i.children.length > 0) {
          this.findMenuByKey(i.children, key)
        }
      }
    },
    handleUpdateMenuTitle(value) {
      this.findMenuByKey(this.menu, value.path)
      this.active.title = value.title
      this.$emit('dynamicRouterShow', value.path, this.activeMenu.title)
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 65px;
  min-height: 100vh !important;
  //overflow-x: hidden;
  //&.ant-layout-has-sider {
  //  flex-direction: row;
  //}
}
>>> .ant-layout-sider {
  overflow-y: auto;
}
</style>
